import React,{useEffect} from 'react';
import {Form, Input, Select, DatePicker, Button, Space, Modal, InputNumber, Row, Col } from "antd";

interface propsType {
    modalShow:boolean;
    title:string;
    data:object;
    modalOk(data: object): void;
    cancel(data: object): void;
}
function EditForm(props) {
    let {modalShow,data,title,modalOk,cancel,RAMOptions,subTypeOptions} = props
    let subRAM = ''
    let subType = ''
    const [editForm] = Form.useForm();

    useEffect(() => {
        editForm.setFieldsValue(data)
    }, [modalShow,data]);

    const modalSubmit = () => {
        editForm.validateFields().then((values) => {
            modalOk(values)
        })
    }
    const modalCancel = () => {
        cancel()
    }
    const subRAMChange = (val) => {
      console.log('subRAMChange---',val)
    }
    const subTypeChange = (val) => {
        console.log('subTypeChange---',val)
    }
    return (
        <Modal
            open={props.modalShow}
            title={props.title}
            onOk={modalSubmit}
            onCancel={modalCancel}
            footer={(_, { OkBtn, CancelBtn }) => (
                <>
                    <CancelBtn />
                    <OkBtn />
                </>
            )}
        >
            <Form
                form={editForm}
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 14 }}
                layout="horizontal"
            >
                <Form.Item label="名称：" name="subName" rules={[{ required: true,message:'请输入名称'}]}>
                    <Input/>
                </Form.Item>
                <Form.Item label="类型：" name="subType" rules={[{ required: true,message:'请选择类型'}]}>
                    <Select
                        value={subType}
                        style={{ width: '100%' }}
                        onChange={subTypeChange}
                        options={subTypeOptions}
                    />
                </Form.Item>
                <Form.Item label="内存：" name="subRAM" rules={[{ required: true,message:'请选择对应的内存'}]}>
                    <Select
                        value={subRAM}
                        style={{ width: '100%' }}
                        onChange={subRAMChange}
                        options={RAMOptions}
                    />
                </Form.Item>
                <Form.Item label="金额：" name="subMoney" rules={[{ required: true,message:'请输入金额'}]}>
                    <InputNumber  style={{'width':'100%'}}/>
                </Form.Item>
                <Form.Item label="描述：" name="subDes">
                    <Input.TextArea />
                </Form.Item>
            </Form>
        </Modal>
    );
}

export default EditForm;
